<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="postForm">
        <el-form-item label="抽取标题">
          <el-input v-model="postForm.title" clearable placeholder="请输入抽取标题" />
        </el-form-item>
        <el-form-item label="专家库">
          <el-select v-model="postForm.databaseId" clearable placeholder="请选择专家库">
            <el-option v-for="item in ZJKList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="抽取人数">
          <el-input v-model="postForm.num" clearable placeholder="请输入抽取人数" />
        </el-form-item>
        <!-- <el-form-item label="抽取专家名称">
          <el-input v-model="postForm.expertName" clearable placeholder="抽取专家名称" />
        </el-form-item> -->
        <el-form-item label="是否补抽">
          <el-select v-model="postForm.reselect" clearable placeholder="请选择是否补抽">
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="补抽原因">
          <el-input v-model="postForm.reselectCause" clearable placeholder="请输入补抽原因" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- <el-form ref="form" :model="form" label-width="80px" /> -->
      <el-table :data="tableData.list" style="width: 100%">
        <el-table-column align="center" type="index" label="序号" />
        <el-table-column align="center" prop="title" label="抽取标题" />
        <el-table-column align="center" prop="databaseName" label="专家库名称" />
        <el-table-column align="center" prop="num" label="抽取人数" />
        <!-- <el-table-column align="center" prop="expertName" label="抽取专家名称">
          <template slot-scope="scope">
            <el-tag v-for="(item, index) in scope.row.expertList" :key="index" style="margin-right: 10px" type="success" hit @click="lookDetail(item)">{{ item.value }}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column align="center" prop="bool" label="是否补抽" />
        <el-table-column align="center" prop="reselectCause" label="补抽原因" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="lookExpert(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--
          current-page:代表的是当前第几页
          total：代表分页器一共需要展示多少条数据
          page-size：代表每页默认展示数据条数
          page-sizes：代表可以设置每一页需要展示多少条数据
          layout：可以实现分页器布局
          @current-change:当页码发生变化触发
          @size-change：当每页展示条数发送变化触发
         -->
      <el-pagination :current-page="postForm.currentPage" :total="tableData.total" :page-size="postForm.pageSize" :page-sizes="[1, 3, 5, 10]" style="padding: 20px 0" layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </el-card>
    <formDialog :close-modal="false" :disabled="dialog_form.disabled" :title="dialog_form.title" :visible="dialog_form.visible" :data-source="dialog_form.form" :get-list="loadData" @close="closeFormDialog" />
    <!-- 专家列表 -->
    <el-drawer title="专家列表" :visible.sync="drawer_form.visible" direction="rtl" :before-close="handleClose">
      <el-tag v-for="(item, index) in drawer_form.expertList" :key="index" style="margin: 10px 10px" type="success" hit @click="lookDetail(item)">{{ item.value }}</el-tag>
    </el-drawer>
  </div>
</template>

<script>
import { expertApi } from '@/api/expert'
import formDialog from './components/formDialog.vue'
export default {
  name: 'Dashboard',
  components: { formDialog },
  data() {
    return {
      drawer_form: {
        visible: false,
        expertList: []
      },
      // dialog框
      dialog_form: {
        visible: false,
        form: {},
        title: '',
        disabled: false
      },
      // 搜索
      postForm: {
        currentPage: 1,
        pageSize: 10
      },
      // 表格
      tableData: {
        list: [],
        total: 0
      },
      // 专家库列表
      ZJKList: [],
      // 专家库id
      databaseId: ''
    }
  },
  computed: {},
  created() {
    this.loadExpertData({ currentPage: 1, pageSize: 9999 })
    this.loadData(this.postForm)
  },
  methods: {
    lookDetail(row) {
      const id = row.key
      this.loadExpertInfoDetail(id)
      this.dialog_form.visible = true
      this.dialog_form.disabled = true
      console.log(this.dialog_form.form)
    },
    // 查看专家
    lookExpert(row) {
      this.drawer_form.visible = true
      this.drawer_form.expertList = row.expertList
      console.log(row)
    },
    // 搜索
    search() {
      this.loadData(this.$filNull(this.postForm))
    },
    // 获取专家抽取记录
    loadData(postForm) {
      expertApi.loadRecord(postForm).then(res => {
        const { data, msg, result } = res
        if (result === 1) {
          this.tableData.list = data.list
          this.tableData.total = data.total
          this.tableData.list.map(item => {
            item.bool = item.reselect == true ? '是' : '否'
          })
        } else if (result === 0) {
          this.$message.warning(msg)
          this.tableData.list = []
          this.tableData.total = 0
        }
      })
    },
    // 获取专家详情
    loadExpertInfoDetail(id) {
      expertApi.loadExpertInfoDetail({ id }).then(res => {
        const { msg, result, data } = res
        if (result == 1) {
          this.dialog_form.form = data
        }
      })
    },
    // 获取专家库列表
    loadExpertData(postForm) {
      expertApi.loadExpert(postForm).then(res => {
        const { data, msg, result } = res
        if (result === 1) {
          this.ZJKList = data.list
        } else if (result === 0) {
          // this.$message.warning(msg)
          this.ZJKList = []
        }
      })
    },
    // 页码点击事件handleCurrentChange
    handleCurrentChange(currentPage) {
      this.postForm.currentPage = currentPage
      this.loadData(this.postForm)
    },
    // 展示条数变化事件
    handleSizeChange(pageSize) {
      this.postForm.pageSize = pageSize
      this.loadData(this.postForm)
    },
    handleClose() {
      this.drawer_form.visible = false
    },
    // 关闭dialog弹窗
    closeFormDialog() {
      this.dialog_form.visible = false
      this.initForm = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
